<template>
  <div class="app-container">
    <el-row>
      <!-- 树结构 -->
      <el-col :span="6" :xs="24">
        <div class="mainbox-left">
          <div class="box-card">
            <videoLeftMenu @treeClick="handleTreeClick" />
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24" style="padding-left: 0px">
        <div class="none2-border3 userlist mainbox">
          <div class="filter-container">
            <el-form ref="filterFormRef" :inline="true" :model="filterForm">
              <el-form-item label="文件名" prop="fileOriginName">
                <el-input v-model.trim="filterForm.fileOriginName" placeholder="请输入文件名"></el-input>
              </el-form-item>
              <el-form-item label="文件类型">
                <el-select v-model.trim="filterForm.fileTypeIsImg" placeholder="请选择文件类型" @change="typeChange">
                  <el-option label="视频" value="0" />
                  <el-option label="图片" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="视频文件分类" prop="fileType2" v-if="filterForm.fileTypeIsImg == '0'">
                <el-select v-model.trim="filterForm.fileType2" placeholder="请选择视频文件分类">
                  <el-option label="全部" value="" />
                  <el-option label="录制文件" :value="1" />
                  <el-option label="上传文件" :value="2" />
                </el-select>
              </el-form-item>
            </el-form>
            <div class="flex-1" />
            <div>
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </div>
          <dt-table
            v-loading="loading"
            :table-opts="tableOpts"
            :pagination-data="{
              total: total,
              queryParams: filterForm
            }"
            @pagination="getList"
          >
          </dt-table>
        </div>
      </el-col>
    </el-row>
    <videoFormModel ref="videoFormModel" @success="getList" />
    <dtDialog
      title="上传文件"
      :visible.sync="uploadDialogVisible"
      :lock-scroll="false"
      :append-to-body="true"
      :is-loading="uploadLoading"
      @closeDialog="onUploadModalClosed"
      @comfirmBtn="onUploadSubmit()"
    >
      <DtFileUpload
        ref="fileUploadRef"
        v-model="fileList"
        :file-type="fileType"
        :fileLimit="1"
        :fileSize="200"
      />
    </dtDialog>
  </div>
</template>

<script>
import videoLeftMenu from './components/videoLeftMenu'
import videoFormModel from './components/videoFormModel'
import { getPageVideoFile, videoAdd, deleteVideo } from '@/api/videoFusion/videoManage'
import { cloud } from '@/framework/utils/request'

export default {
  components: { videoLeftMenu, videoFormModel },
  data() {
    const COL_OPERATOR = [
      {
        text: '播放',
        size: 'small',
        permission: ['VIDEO_MANAGE_PLAY_BUTTON'],
        click: (row, col, cellValue) => {
          return this.handlePlay(row)
        }
      },
      {
        text: '修改',
        size: 'small',
        permission: ['VIDEO_MANAGE_EDIT_BUTTON'],
        click: (row, col, cellValue) => {
          return this.handleUpdate(row)
        }
      },
      {
        text: '删除',
        size: 'small',
        type: 'danger',
        permission: ['VIDEO_MANAGE_DEL_BUTTON'],
        click: (row, col, cellValue) => {
          return this.handleDelete(row)
        }
      }
    ]
    const IMG_COL_OPERATOR = [
      {
        text: '修改',
        size: 'small',
        permission: ['VIDEO_MANAGE_EDIT_BUTTON'],
        click: (row, col, cellValue) => {
          return this.handleUpdate(row)
        }
      },
      {
        text: '删除',
        size: 'small',
        type: 'danger',
        permission: ['VIDEO_MANAGE_DEL_BUTTON'],
        click: (row, col, cellValue) => {
          return this.handleDelete(row)
        }
      }
    ]
    return {
      IMG_COL_OPERATOR,
      COL_OPERATOR,
      filterForm: {
        fileOriginName: '',
        fileTypeIsImg: '0',
        fileType2: '',
        pageNo: 1,
        pageSize: 10,
        belongToType: '',
        belongToId: ''
      },
      tableOpts: {
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        tableData: [],
        rowKey: 'id',
        toolbarBtn: [],
        // 表头 表格标题
        tableCol: [
          {
            prop: 'fileOriginName',
            label: '文件名',
            show: true
          },
          {
            prop: 'videoCode',
            label: '文件编号',
            show: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            show: true
          },
          {
            prop: 'createUserName',
            label: '创建人',
            show: true
          },
          {
            prop: 'image',
            label: '缩略图',
            show: false,
            render: (h, param) => {
              if (param.image) {
                return <el-image style="width: 80px; height: 55px" fit={'cover'} src={param.image} preview-src-list={[param.image]}></el-image>
              }
              return '-'
            }
          },
          {
            prop: 'surplusDays',
            label: '保存剩余天数',
            show: true,
            render: (h, param) => {
              if (param.surplusDays <= 3) {
                return <span style="color: red">{param.surplusDays}</span>
              }
              return <span>{param.surplusDays}</span>
            }
          },
          {
            prop: 'fileType',
            label: '文件类型',
            show: true,
            // search: true,
            width: 120,
            clearable: true,
            render: (h, param) => {
              if (param.fileType == 1) {
                return <el-tag>录制文件</el-tag>
              } else if (param.fileType == 2) {
                return <el-tag type="success">上传文件</el-tag>
              }
              return '-'
            }
          }
        ],
        // 操作表格每一条
        operator: {
          fixed: 'right',
          width: 222,
          operatorBtn: COL_OPERATOR
        }
      },
      loading: false,
      total: 0,
      uploadDialogVisible: false,
      uploadLoading: false,
      fileList: [],
      fileType: ['mp4'],
      leftData: {}
    }
  },
  methods: {
    handlePlay(row) {
      // this.$message.info('开发中，请稍等')
      // TODO: 演示用
      const url = this.$router.resolve({
        path: '/monitorPlay/playDownView',
        query: {
          // fileId: row.fileId,
          videoCode: row.videoCode,
          monitorName: row.monitorName
        }
      })
      window.open(url.href, '_blank')
    },
    handleUpdate(row) {
      this.$refs.videoFormModel.open(row)
    },
    handleDelete(row) {
      this.$dtModal.confirm('请确认是否删除视频文件').then(() => {
        deleteVideo({
          id: row.id,
          ids: [row.id]
        }).then((res) => {
          this.$dtModal.msgSuccess(res.message)
          this.getList()
        })
      })
    },
    handleAdd() {
      if (!this.leftData.id) {
        this.$dtModal.msgWarning('请联系管理人员添加系统权限')
        return
      }
      this.uploadDialogVisible = true
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.filterForm = {
        fileOriginName: '',
        fileTypeIsImg: '0',
        fileType2: '',
        belongToType: this.leftData.belongToType,
        belongToId: this.leftData.id,
        pageNo: 1,
        pageSize: 10
      }
      this.typeChange(0)
      this.handleQuery()
    },
    getList() {
      if (!this.filterForm.belongToId) {
        this.loading = false
        this.$message.warning('请选择监控分组/监控接入/其他下的监控/系统')
        return
      }
      this.loading = true
      const params = {
        ...this.filterForm,
        fileTypes: this.filterForm.fileType2 ? [this.filterForm.fileType2] : [1, 2]
      }
      getPageVideoFile(params).then((res) => {
        this.tableOpts.tableData = res.data.rows.map((item) => {
          item.image = `${process.env.VUE_APP_BASE_API + cloud.file}/sysFileInfo/public/preview?fileId=${item.fileId}`
          return item
        })
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleTreeClick(data) {
      this.leftData = data
      if (data.id) {
        this.filterForm.belongToType = data.belongToType
        this.filterForm.belongToId = data.id
        this.getList()
      } else {
        this.filterForm.belongToType = ''
        this.filterForm.belongToId = ''
        this.tableOpts.tableData = []
      }
      this.setUploadBtn()
    },
    typeChange(val) {
      const imgobj = this.findObject(this.tableOpts.tableCol, 'image')
      const videoObj = this.findObject(this.tableOpts.tableCol, 'fileType')
      this.loading = true
      if (val == 0) {
        imgobj.show = false
        videoObj.show = true
        this.tableOpts.operator.operatorBtn = this.COL_OPERATOR
        if (this.filterForm.fileType2 == 3) {
          this.filterForm.fileType2 = ''
        }
      } else {
        this.filterForm.fileType2 = 3
        imgobj.show = true
        videoObj.show = false
        this.tableOpts.operator.operatorBtn = this.IMG_COL_OPERATOR
      }
      this.setUploadBtn()
      this.getList()
    },
    setUploadBtn() {
      if (this.leftData.belongToType == 3 && this.filterForm.fileTypeIsImg == 0 && this.leftData.id) {
        this.tableOpts.toolbarBtn = [{
          label: '上传',
          type: 'primary',
          permission: ['VIDEO_MANAGE_ADD_BUTTON'],
          click: (type) => {
            this.handleAdd()
          }
        }]
      } else {
        this.tableOpts.toolbarBtn = []
      }
    },
    findObject(arr, key) {
      return arr.find((item) => item.prop == key)
    },
    onUploadModalClosed() {
      this.fileList = []
    },
    onUploadSubmit() {
      if (!this.fileList.length) {
        this.$dtModal.msgWarning('请选择文件')
        return
      }
      const { belongToType, id } = this.leftData
      this.uploadLoading = true
      const data = {
        fileType: 2,
        belongToType,
        belongToId: id,
        fileId: this.fileList[0].id
      }
      videoAdd(data).then((res) => {
        this.$dtModal.msgSuccess(res.message)
        this.getList()
        this.uploadLoading = false
        this.uploadDialogVisible = false
      }).catch(() => {
        this.uploadLoading = false
      })
    }
  }
}
</script>

<style>

</style>
